import React, { Component } from 'react'
import { Input, Select, Table, Button, Pagination } from 'antd'

import XHeader from '../../components/header'
import XFooter from '../../components/footer'

import Img_Test_1 from '../../images/test/PreAngel.png'
import Img_Test_2 from '../../images/test/GGV纪源资本.png'
import Img_Test_3 from '../../images/test/启明创投.png'
import Img_Test_4 from '../../images/test/软银中国.jpg'
import Img_Test_5 from '../../images/test/德同资本.png'
import Img_Test_6 from '../../images/test/晨兴资本.png'
import Img_Test_7 from '../../images/test/凯鹏华盈.jpg'
import Img_Test_8 from '../../images/test/平安创投.png'
import Img_Test_9 from '../../images/test/涌铧投资.png'

import './index.scss';

const Option = Select.Option

export default class InvestmentOrg extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [
        {
          key: '1',
          name: 'PreAngel',
          area: '上海',
          count: 287,
          items: ['五人成军', '瓴泰科技', 'CoinVoice'],
          img: Img_Test_1
        }, {
          key: '2',
          name: 'GGV纪源资本',
          area: '上海',
          count: 285,
          items: ['小佩宠物', 'Vincross', 'Lime'],
          img: Img_Test_2
        }, {
          key: '3',
          name: '启明创投',
          area: '上海',
          count: 268,
          items: ['小佩宠物', 'Nuvaira', '拿森汽车'],
          img: Img_Test_3
        }, {
          key: '4',
          name: '软银中国',
          area: '上海',
          count: 249,
          items: ['Clutter', '阿里本地生活服务', '太美医疗'],
          img: Img_Test_4
        }, {
          key: '5',
          name: '德同资本',
          area: '上海',
          count: 248,
          items: ['华昊中天', '电享', '茂烨厚德'],
          img: Img_Test_5
        }, {
          key: '6',
          name: '晨兴资本',
          area: '上海',
          count: 233,
          items: ['数坤科技', '宸安生物', 'Apic Bio'],
          img: Img_Test_6
        }, {
          key: '7',
          name: '凯鹏华盈',
          area: '上海',
          count: 212,
          items: ['Better Mortgage', 'FabFitFun', 'Toss'],
          img: Img_Test_7
        }, {
          key: '8',
          name: '平安创投',
          area: '上海',
          count: 207,
          items: ['小区乐', 'NextCure', '昌郁医药'],
          img: Img_Test_8
        }, {
          key: '9',
          name: '涌铧投资',
          area: '上海',
          count: 194,
          items: ['哒哒英语', '磐启微电子', '微纳星空'],
          img: Img_Test_9
        }, 
      ],
      columns: [
        {
          title: '机构',
          dataIndex: 'name',
          key: 'name',
          render: (text, record) => (
            <div className='org-wrap'>
              <img src={record.img} alt=""/>
              <div className='info'>
                <h2>{record.name}</h2>
              </div>
            </div>
          ),
        }, {
          title: '所在地',
          dataIndex: 'area',
          key: 'area',
        }, {
          title: '历史总投资次数',
          dataIndex: 'count',
          key: 'count',
        }, {
          title: '最新获投公司',
          dataIndex: 'address',
          key: 'address',
          render: (text, record) => (
            <ul className='company-list'>
              {
                record.items.map((item, index) => <li key={index} className='company-item'>{item}</li>)
              }
            </ul>
          ),
        }, {
          title: '操作',
          key: 'action',
          render: (text, record) => (
            <span>
              <Button size="small" className='btn btn1'>详情</Button>
              <br />
              <Button type="primary" size="small" className='btn btn1'>投BP</Button>
            </span>
          ),
        }
      ]
    }
  }
  componentDidMount() {
    
  }
  render() {
    return (
      <section className='page page-investment-org'>
        <XHeader activeIndex={5}></XHeader>
        <div className='inner'>
          <div className='filter-wrap'>
            <div className='item item1'>
              <div className='label'>投资阶段：</div>
              <div className='value'>
                <ul>
                  <li className='active'>不限</li>
                  <li>种子轮</li>
                  <li>天使轮</li>
                  <li>Pre-A轮</li>
                  <li>A轮</li>
                  <li>A+轮</li>
                  <li>Pre-B轮</li>
                  <li>B轮</li>
                  <li>B+轮</li>
                  <li>C轮</li>
                  <li>C+轮</li>
                  <li>D轮</li>
                  <li>E轮~Pre-IPO</li>
                  <li>IPO</li>
                  <li>ICO</li>
                  <li>新三板</li>
                  <li>被收购</li>
                  <li>战略融资</li>
                  <li>债券融资</li>
                </ul>
              </div>
            </div>
            <div className='item item2'>
              <div className='label'>机构地址：</div>
              <div className='value'>
                <ul>
                  <li className='active'>不限</li>
                  <li>国内</li>
                  <li>国外</li>
                </ul>
              </div>
            </div>
            <div className='item item3'>
              <div className='label'>投资时间：</div>
              <div className='value'>
               <ul>
                  <li className='active'>不限</li>
                  <li>最近7天</li>
                  <li>最近30天</li>
                  <li>最近90天</li>
                  <li>2019</li>
                  <li>2018</li>
                  <li>2017</li>
                  <li>2016</li>
                  <li>2015</li>
                  <li>2014</li>
                  <li>2013</li>
                </ul>
              </div>
            </div>
          </div>
          <Table
            columns={this.state.columns}
            dataSource={this.state.data}
            pagination={false}
          />
          <div className='pagination'>
            <Pagination showQuickJumper defaultCurrent={2} total={500} />
          </div>
        </div>
        <XFooter></XFooter>
      </section>
    )
  }
}